<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>朋友圈打卡记录详情</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: #333;
            line-height: 1.6;
            min-height: 100vh;
            overflow: hidden;
        }
        
        .container {
            width: 100%;
            height: 100vh;
            background: white;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        
        .header {
            padding: 20px 40px;
            border-bottom: 1px solid #e0e0e0;
            background: white;
            z-index: 10;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .page-title {
            font-size: 24px;
            font-weight: bold;
            color: #2d3436;
            position: relative;
            display: inline-block;
        }
        
        .page-title::after {
            content: "";
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(to right, #6c5ce7, #00cec9);
            border-radius: 2px;
        }
        
        .main-content {
            flex: 1;
            padding: 25px 40px;
            overflow: auto;
            background: #f8f9ff;
        }
        
        .content-wrapper {
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .checkin-cards {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
            gap: 25px;
            width: 100%;
        }
        
        .checkin-card {
            background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
            border-left: 4px solid #6c5ce7;
            transition: all 0.3s;
            display: flex;
            flex-direction: column;
        }
        
        .checkin-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        }
        
        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            width: 100%;
        }
        
        .avatar {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 14px;
            margin-right: 15px;
            flex-shrink: 0;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        }
        
        .user-info {
            flex: 1;
            min-width: 0;
        }
        
        .user-id {
            font-weight: bold;
            font-size: 18px;
            color: #2d3436;
            margin-bottom: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .checkin-text {
            font-size: 15px;
            color: #636e72;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .image-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-top: 15px;
            width: 100%;
        }
        
        .image-placeholder {
            height: 150px;
            background: linear-gradient(135deg, #e6e9f0 0%, #eef1f5 100%);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #888;
            font-size: 14px;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
            border: 1px dashed #dbe6ff;
        }
        
        .back-button {
            background: #6c5ce7;
            color: white;
            border: none;
            border-radius: 20px;
            padding: 10px 20px;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 10px rgba(108, 92, 231, 0.3);
            transition: all 0.3s;
        }
        
        .back-button:hover {
            background: #5241d4;
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(108, 92, 231, 0.4);
        }
        
        .back-button svg {
            width: 18px;
            height: 18px;
        }
        
        .card-footer {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px dashed #e0e0e0;
            font-size: 14px;
            color: #636e72;
        }
        
        .date-info {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .status-info {
            background: #e8f4ff;
            padding: 4px 10px;
            border-radius: 15px;
            color: #3498db;
            font-weight: 500;
        }
        
        .status-info.approved {
            background: #e8f9f0;
            color: #27ae60;
        }
        
        .status-info.rejected {
            background: #fdecea;
            color: #e74c3c;
        }
        
        /* 响应式设计 */
        @media (max-width: 1200px) {
            .checkin-cards {
                grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            }
        }
        
        @media (max-width: 992px) {
            .header {
                padding: 15px 20px;
            }
            
            .main-content {
                padding: 15px 20px;
            }
            
            .checkin-cards {
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            }
            
            .avatar {
                width: 50px;
                height: 50px;
            }
            
            .image-placeholder {
                height: 120px;
            }
        }
        
        @media (max-width: 768px) {
            .checkin-cards {
                grid-template-columns: 1fr;
            }
            
            .page-title {
                font-size: 20px;
            }
            
            .back-button {
                padding: 8px 15px;
                font-size: 13px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1 class="page-title">朋友圈打卡记录详情</h1>
            <button class="back-button">
                <svg viewBox="0 0 24 24">
                    <path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
                </svg>
                返回
            </button>
        </div>
        
        <div class="main-content">
            <div class="content-wrapper">
                <div class="checkin-cards">
                    <div class="checkin-card">
                        <div class="card-header">
                            <div class="avatar">头像</div>
                            <div class="user-info">
                                <div class="user-id">用户ID: 123456</div>
                                <div class="checkin-text">这家餐厅的菜品真的非常棒，环境也很优雅！</div>
                            </div>
                        </div>
                        <div class="image-grid">
                            <div class="image-placeholder">图片1</div>
                            <div class="image-placeholder">图片2</div>
                        </div>
                        <div class="card-footer">
                            <div class="date-info">
                                <svg viewBox="0 0 24 24" width="16" height="16">
                                    <path fill="#636e72" d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z"/>
                                </svg>
                                <span>2023-09-04 18:30</span>
                            </div>
                            <div class="status-info approved">已审核</div>
                        </div>
                    </div>
                    
                    <div class="checkin-card">
                        <div class="card-header">
                            <div class="avatar">头像</div>
                            <div class="user-info">
                                <div class="user-id">用户ID: 789012</div>
                                <div class="checkin-text">服务周到，菜品新鲜，强烈推荐给大家！</div>
                            </div>
                        </div>
                        <div class="image-grid">
                            <div class="image-placeholder">图片1</div>
                            <div class="image-placeholder">图片2</div>
                        </div>
                        <div class="card-footer">
                            <div class="date-info">
                                <svg viewBox="0 0 24 24" width="16" height="16">
                                    <path fill="#636e72" d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z"/>
                                </svg>
                                <span>2023-09-03 19:15</span>
                            </div>
                            <div class="status-info approved">已审核</div>
                        </div>
                    </div>
                    
                    <div class="checkin-card">
                        <div class="card-header">
                            <div class="avatar">头像</div>
                            <div class="user-info">
                                <div class="user-id">用户ID: 345678</div>
                                <div class="checkin-text">环境优雅，菜品精致，值得再次光顾！</div>
                            </div>
                        </div>
                        <div class="image-grid">
                            <div class="image-placeholder">图片1</div>
                            <div class="image-placeholder">图片2</div>
                        </div>
                        <div class="card-footer">
                            <div class="date-info">
                                <svg viewBox="0 0 24 24" width="16" height="16">
                                    <path fill="#636e72" d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z"/>
                                </svg>
                                <span>2023-09-02 20:05</span>
                            </div>
                            <div class="status-info">待审核</div>
                        </div>
                    </div>
                    
                    <div class="checkin-card">
                        <div class="card-header">
                            <div class="avatar">头像</div>
                            <div class="user-info">
                                <div class="user-id">用户ID: 901234</div>
                                <div class="checkin-text">和朋友一起来聚餐，大家都非常满意！</div>
                            </div>
                        </div>
                        <div class="image-grid">
                            <div class="image-placeholder">图片1</div>
                            <div class="image-placeholder">图片2</div>
                        </div>
                        <div class="card-footer">
                            <div class="date-info">
                                <svg viewBox="0 0 24 24" width="16" height="16">
                                    <path fill="#636e72" d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z"/>
                                </svg>
                                <span>2023-09-01 17:45</span>
                            </div>
                            <div class="status-info approved">已审核</div>
                        </div>
                    </div>
                    
                    <div class="checkin-card">
                        <div class="card-header">
                            <div class="avatar">头像</div>
                            <div class="user-info">
                                <div class="user-id">用户ID: 567890</div>
                                <div class="checkin-text">生日聚餐选在这里，服务非常周到！</div>
                            </div>
                        </div>
                        <div class="image-grid">
                            <div class="image-placeholder">图片1</div>
                            <div class="image-placeholder">图片2</div>
                        </div>
                        <div class="card-footer">
                            <div class="date-info">
                                <svg viewBox="0 0 24 24" width="16" height="16">
                                    <path fill="#636e72" d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z"/>
                                </svg>
                                <span>2023-08-31 19:30</span>
                            </div>
                            <div class="status-info rejected">未通过</div>
                        </div>
                    </div>
                    
                    <div class="checkin-card">
                        <div class="card-header">
                            <div class="avatar">头像</div>
                            <div class="user-info">
                                <div class="user-id">用户ID: 112233</div>
                                <div class="checkin-text">菜品口味独特，下次还会再来！</div>
                            </div>
                        </div>
                        <div class="image-grid">
                            <div class="image-placeholder">图片1</div>
                            <div class="image-placeholder">图片2</div>
                        </div>
                        <div class="card-footer">
                            <div class="date-info">
                                <svg viewBox="0 0 24 24" width="16" height="16">
                                    <path fill="#636e72" d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z"/>
                                </svg>
                                <span>2023-08-30 18:20</span>
                            </div>
                            <div class="status-info approved">已审核</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 交互效果
        document.querySelector('.back-button').addEventListener('click', function() {
            alert('返回上一页');
        });
        
        // 卡片点击效果
        document.querySelectorAll('.checkin-card').forEach(card => {
            card.addEventListener('click', function() {
                this.style.transform = 'scale(0.98)';
                setTimeout(() => {
                    this.style.transform = '';
                }, 300);
            });
        });
    </script>
</body>
</html>